<template>
	<view class="LNproduct">
		<view class="CusTop">
			<Top :fa-msg="msg"></Top>
		</view>
		
		<view class="LNCon">
			<view class="search">
				<span>🔍️</span>
				<input v-model="value" placeholder="搜索产品名称或编号" @input="filterProducts"  />
			</view>
			<ul class="ULCon">
				<li class="LICon" v-for="item in filteredArr" :key="item._id">
					<view class="one">
						<img class="vipImg" src="https://image.freepik.com/free-vector/vip-padded-background-with-golden-logo_23-2147657690.jpg" alt="" />
					</view>
					<view class="two">
						<p class="vipName">{{item.vip}}</p>
						<p class="productNum">{{item.productNum}}</p>
					</view>
					<view class="three">
						<p class="priceTitle">价格(元/{{item.timeType}})</p>
						<p class="price">￥{{item.price}}</p>
					</view>
					<view class="four" @click="go(item)">
						〉
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	
	import Top from "../components/Top/Top.vue"
	export default { 
		data() {
			return {
				msg:"产品列表",
				arr:[],
				value: '',
				filteredArr: []
				 }
		},
		methods: {
			filterProducts() {
			    const keyword = this.value.toLowerCase(); // 将输入的关键词转为小写
			    this.filteredArr = this.arr.filter(item => {
			      // 过滤条件：产品名称包含关键词或产品编号包含关键词
			      return item.vip.toLowerCase().includes(keyword) || item.productNum.toLowerCase().includes(keyword);
			    });
			  },
			go(item){
				uni.navigateTo({
				  url:
				    "/pages/LNProductDetail/LNProductDetail?item=" +
				    JSON.stringify(item),
				});
			},
		},
		components:{
			Top
		},
		created() {
		  uni.request({
		    url: "http://127.0.0.1:3000/product/getAll", //接口地址
		    method: "POST",
		    success: (res) => {
		      this.arr = res.data.data;
			  this.filteredArr = res.data.data; // 初始化filteredArr
			  console.log(this.arr,"product")
		    },
		  });  

		},
	}
</script>

<style lang="scss">
.LNproduct{
	background-color: #f9f9f9;
	.CusTop{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
	}
	
	.LNCon{
		margin-top: 200rpx;
		.search{
			width: 90%;
			height: 80rpx;
			margin: 0 auto;
			border: 2rpx solid #ccc;
			border-radius: 20rpx;
			border-bottom: 1px solid #eee;
			background-color: white;
			display: flex;
			align-items: center;
			padding: 0rpx 30rpx;
			position: sticky;
			top: 180rpx;
		}
		.ULCon{
			padding: 40rpx 20rpx;
			.LICon{
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
				background-color: white;
				border-radius: 20rpx;
				box-shadow: 1px 1px 5px #ccc;
				margin-bottom: 30rpx;
				color: gray;
				display: flex;
				justify-content: space-between;
				.one{
					
					.vipImg{
						width: 150rpx;
						height: 150rpx;
					}
				}
				.two{
					line-height: 75rpx;
					.vipName{
						font-size:28rpx;
						font-weight: 700;
					}
					.productNum{
						font-size: 25rpx;
					}
				}
				.three{
					line-height: 75rpx;
					.priceTitle{
						font-size: 25rpx;
					}
					.price{
						color: red;
					}
				}
				.four{
					line-height: 150rpx;
				}
		}	
	}
}
}
</style>
